<template>
  <div id="data-view" class="data-view">
    <dv-full-screen-container>
      <top-header />
      <div class="main-content">
        <div class="block-left-right-content">
          <ranking-board />

          <div class="block-top-bottom-content">
            <div class="block-top-content">
              <div id="mapContainer"></div>
              <scroll-board />
            </div>
            <div class="cards">
              <water-level-chart />
              <div id="waterLevelHist" class="card waterLevelHist"></div>
              <div id="Rainfall" class="card Rainfall"></div>
            </div>
          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>
<script>
import * as echarts from "echarts";
import "echarts/extension/bmap/bmap";
import { ecdata, ecgeoCoordMap, ecpolygon } from "/src/assets/js/echartData";
import topHeader from "./topHeader";
import digitalFlop from "./digitalFlop";
import rankingBoard from "./rankingBoard";
import waterLevelChart from "./waterLevelChart";
import scrollBoard from "./scrollBoard.vue";
// import cards from "./cards.vue";
export default {
  name: "DataView",
  components: {
    topHeader,
    digitalFlop,
    rankingBoard,
    // roseChart,
    waterLevelChart,
    scrollBoard,
    // cards,
  },
  data() {
    return {
      centerPoint: [114.4395833335, 32.6], //地图展示中心位置
      zoom: 9, //地图缩放级别
    };
  },
  methods: {
    // 展示背景地图
    showMap() {
      var chartDom = document.getElementById("mapContainer");
      chartDom.style.backgroundColor = "green";
      this.myChart = echarts.init(chartDom);
      var myChart = echarts.init(chartDom);
      var option;
      var data = ecdata;
      var geoCoordMap = ecgeoCoordMap;
      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
            });
          }
        }
        return res;
      };
      function renderItem(params, api) {
        var coords = ecpolygon;
        var points = [];
        for (var i = 0; i < coords.length; i++) {
          points.push(api.coord(coords[i]));
        }
        var color = api.visual("color");
        return {
          type: "polygon",
          shape: {
            points: echarts.graphic.clipPointsByRect(points, {
              x: params.coordSys.x,
              y: params.coordSys.y,
              width: params.coordSys.width,
              height: params.coordSys.height,
            }),
          },
          style: api.style({
            fill: color,
            stroke: echarts.color.lift(color),
          }),
        };
      }
      option = {
        backgroundColor: "transparent",
        title: {
          //   text: "全国主要城市空气质量",
          //   subtext: "data from PM25.in",
          //   sublink: "http://www.pm25.in",
          //   left: "center",
          //   textStyle: {
          //     color: "#fff",
          //   },
        },
        tooltip: {
          trigger: "item",
        },
        bmap: {
          center: this.centerPoint,
          zoom: this.zoom,
          roam: true,
          mapStyle: {
            styleJson: [
              {
                featureType: "water",
                elementType: "geometry",
                stylers: {
                  visibility: "on",
                  color: "#113549ff",
                },
              },
              //   {
              //     featureType: "water",
              //     elementType: "labels",
              //     stylers: {
              //       visibility: "on",
              //     },
              //   },
              {
                featureType: "land",
                elementType: "all",
                stylers: {
                  color: "#004981",
                },
              },
              {
                featureType: "boundary",
                elementType: "geometry",
                stylers: {
                  color: "#064f85",
                },
              },
              {
                featureType: "railway",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "highway",
                elementType: "geometry",
                stylers: {
                  color: "#004981",
                },
              },
              {
                featureType: "highway",
                elementType: "geometry.fill",
                stylers: {
                  color: "#005b96",
                  lightness: 1,
                },
              },
              {
                featureType: "highway",
                elementType: "labels",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "arterial",
                elementType: "geometry",
                stylers: {
                  color: "#004981",
                },
              },
              {
                featureType: "arterial",
                elementType: "geometry.fill",
                stylers: {
                  color: "#00508b",
                },
              },
              {
                featureType: "poi",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "green",
                elementType: "all",
                stylers: {
                  color: "#056197",
                  visibility: "off",
                },
              },
              {
                featureType: "subway",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "manmade",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "local",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "arterial",
                elementType: "labels",
                stylers: {
                  visibility: "on",
                },
              },
              {
                featureType: "boundary",
                elementType: "geometry.fill",
                stylers: {
                  color: "#029fd4",
                },
              },
              {
                featureType: "building",
                elementType: "all",
                stylers: {
                  color: "#1a5787",
                },
              },
              {
                featureType: "districtlabel",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#2dc4bbff",
                },
              },
              {
                featureType: "districtlabel",
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#ffffff00",
                  weight: 3,
                },
              },

              {
                featureType: "district",
                elementType: "labels.text",
                stylers: {
                  fontsize: 20,
                },
              },
              {
                featureType: "district",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#2dc4bbff",
                },
              },
              {
                featureType: "district",
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#ffffff00",
                },
              },

              {
                featureType: "city",
                elementType: "labels.icon",
                stylers: {
                  visibility: "on",
                },
              },
              {
                featureType: "city",
                elementType: "labels",
                stylers: {
                  visibility: "on",
                },
              },
              {
                featureType: "city",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#2dc4bbff",
                },
              },
              {
                featureType: "city",
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#ffffff00",
                },
              },
              {
                featureType: "country",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#2dc4bbff",
                },
              },
              {
                featureType: "country",
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#ffffff00",
                },
              },
              {
                featureType: "water",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#2dc4bbff",
                },
              },
              {
                featureType: "water",
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#ffffff00",
                },
              },
            ],
          },
        },
        series: [
          {
            name: "降雨黄色色警戒",
            type: "scatter",
            coordinateSystem: "bmap",
            data: convertData(data),
            encode: {
              value: 2,
            },
            symbolSize: function (val) {
              // 设置圆点大小
              return 16;
            },
            label: {
              formatter: "{b}",
              position: "right",
              show: true,
            },
            itemStyle: {
              color: "#ddb926",
            },
            emphasis: {
              label: {
                show: true,
              },
            },
          },
          {
            name: "降雨红色警戒",
            type: "effectScatter",
            coordinateSystem: "bmap",
            data: convertData(
              data
                .sort(function (a, b) {
                  return b.value - a.value;
                })
                .slice(0, 5)
            ),
            encode: {
              value: 2,
            },
            symbolSize: function (val) {
              return 18;
            },
            showEffectOn: "emphasis",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            label: {
              formatter: "{b}",
              position: "right",
              show: true,
            },
            itemStyle: {
              color: "#c2565d",
              shadowBlur: 10,
              shadowColor: "#333",
            },
            zlevel: 1,
          },
          {
            type: "custom",
            coordinateSystem: "bmap",
            renderItem: renderItem,
            // itemStyle: {
            //   opacity: 0.5,
            // },
            itemStyle: {
              opacity: 0.5,
              borderWidth: 1, //设置外层边框
              borderColor: "#8ce0ec",
              shadowColor: "rgba(0,54,255, 1)",
              shadowBlur: 2,
            },
            animation: true,
            silent: true,
            data: [0],
            z: -10,
          },
        ],
      };

      option && myChart.setOption(option);
    },
    showRainfall() {
      var chartDom = document.getElementById("Rainfall");

      var myChart = echarts.init(chartDom, "dark");
      var option;

      option = {
        title: {
          text: "未来7天降雨量&径流量",
          subtext: "mm/h",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["降雨量", "径流量"],
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: false, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            // prettier-ignore
            data: ['2021-07-01', '2021-07-02', '2021-07-03', '2021-07-04', '2021-07-05', '2021-07-06', '2021-07-07'],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "降雨量",
            type: "bar",
            data: [2.0, 4.9, 7.0, 76.7, 135.6, 23.2, 25.6],
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "Avg" }],
            },
          },
          {
            name: "径流量",
            type: "bar",
            data: [2.6, 5.9, 9.0, 70.7, 175.6, 26.4, 28.7],
            markPoint: {
              data: [
                { name: "Max", value: 182.2, xAxis: 7, yAxis: 183 },
                { name: "Min", value: 2.3, xAxis: 11, yAxis: 3 },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "Avg" }],
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    creatBasin() {
      const wjbGeoJson = {
        wjb: require("/public/static/wangjiaba_border.json"),
      };
      echarts.registerMap("王家坝流域", { geoJSON: wjbGeoJson["wjb"] });
      const option = {
        series: [
          {
            type: "map",
            map: "王家坝流域",
            silent: true, // 图形是否不响应和触发鼠标事
            roam: false, // 鼠标缩放
            zoom: 1.01,
            itemStyle: {
              borderColor: "#14edfc",
              borderWidth: 5,
              areaColor: "rgba(0,0,0,0)",
            },
          },
        ],
      };
      this.myChart.setOption(option);
    },
    showHistoryWaterLevel() {
      var chartDom = document.getElementById("waterLevelHist");
      var myChart = echarts.init(chartDom, "dark");
      var option;

      option = {
        title: {
          text: "历史最高径流",
          subtext: "mm/h",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["2016", "2017", "2018", "2019", "2020", "2021", "2022"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [220, 332, 301, 334, 429, 201, 324],
            type: "line",
            label: {
              show: true,
              position: "top",
            },
            areaStyle: {},
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
  mounted() {
    const _this = this;
    setTimeout(() => {
      _this.showMap();
      _this.showRainfall();
      _this.showHistoryWaterLevel();
    }, 1000);

    // this.creatBasin();
  },
};
</script>
<style >
.data-view {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;
}
.data-view #dv-full-screen-container {
  background-image: url("./img/bg.png");
  background-size: 100% 100%;
  box-shadow: 0 0 3px blue;
  display: flex;
  flex-direction: column;
}
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.block-left-right-content {
  flex: 1;
  display: flex;
  margin-top: 20px;
}
.block-top-bottom-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-left: 20px;
}

.block-top-content {
  height: 55%;
  display: flex;
  flex-grow: 0;
  box-sizing: border-box;
  padding-bottom: 20px;
  /* background-color: red; */
}
#mapContainer {
  width: 70%;
  height: 100%;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, 0.5);
  box-sizing: border-box;
}
.cards {
  display: flex;
  justify-content: space-between;
  height: 45%;

  /* background: red; */
}
.cards .card {
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, 0.5);

  display: flex;
  flex-direction: column;
  padding-top: 10px;
}
.cards .waterLevelHist {
  width: 32%;
}
.cards .Rainfall {
  width: 45%;
}
</style>